/* // React 核心依赖包
import React from 'react'
// ReactDOM 负责渲染的
import ReactDOM from 'react-dom'

// 创建一个虚拟 DOM
// React.createElement => 类似于 Vue 中的 h 函数
// 参数：元素、属性列表、内容
const h1Ele = React.createElement('h1', { title: 'Hello React' }, 'React ~~')

// 把虚拟 DOM h1Ele 转成真实 DOM 并渲染到 #root
// 渲染谁、渲染到哪儿
ReactDOM.render(h1Ele, document.querySelector('#root')) */

import React from 'react'
import { createRoot } from 'react-dom/client'

// 创建一个虚拟 DOM
// React.createElement => 类似于 Vue 中的 h 函数
// 参数：元素、属性列表、内容
const h1Ele = React.createElement(
  'div',
  {
    className: 'wrap',
  },
  // React.createElement 第三个及后续的所有参数都表示内容
  React.createElement('ul', null, React.createElement('li', null, 'React'), React.createElement('li', null, 'Vue'), React.createElement('li', null, 'Angular'))
)

// createRoot(渲染到哪儿).render(渲染谁)
createRoot(document.querySelector('#root')).render(h1Ele)
